<template>
	<view>
		<view class="bala">
			<view class="bala-he">
				<view class="dis">
					<view>学习币余额</view>
					<view @tap="particulars">
						明细
						<u-icon style="margin-left: 15rpx;" name="arrow-right" size="28"></u-icon>
						<!-- <image style="width: 15rpx;height: 24rpx; margin-left: 15rpx;" src="../../static/user/right.png"></image> -->
					</view>
				</view>
				<view class="dis bi" >
					<view class="bala-money">{{currency}}</view>
					<view class="bala-dui" >
						学习币兑换
					</view>
				</view>
			</view>
			<view class="wenzi">优惠充值套餐</view>
			<view class="bala-flex">
				<view class="bala-ge"
						v-for="(item,index) in moneyList"
						:class="{'bala_lv':ico == index}"
						@tap="qie(item,index)"
						:key="index">
						<view class="a">{{item.currency}}</view>
						<view ><label>{{item.money}}</label>元</view>
				</view>
			</view>
			<button @tap='topup'>充值</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currency:0,
				moneyList:[],
				ico:0,
				//金额
				money:'',
				types:1
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.selectAALs()
			this.selectUserCurrency()
		},
		methods: {
			selectAALs(){
				uni.request({
					method:'GET',
					url:this.$api + '/app/CurrencyController/selectAALs',
					header:{'token':uni.getStorageSync('token')},
					success: (res) => {
						console.log('res',res.data)
						if(res.data.code == 200) {
							this.moneyList = res.data.data
							this.money = res.data.data[0].money
						}
					}
				})
			},
			selectUserCurrency(){
				uni.request({
					method:'GET',
					url:this.$api + '/app/CurrencyController/selectUserCurrency',
					header:{'token':uni.getStorageSync('token')},
					success: (res) => {
						// console.log('res',res.data)
						if(res.data.code == 200) {
							this.currency = res.data.data.currency
						}
					}
				})
			},
			//明细
			particulars(){
				uni.navigateTo({
					url:'../particulars/particulars'
				})
			},
			qie(i,e){
				this.ico = e
				console.log('i',i.money)
				this.money = i.money
			},
			//充值
			topup(){
				console.log('1')
				uni.showLoading({})
				var self = this
				uni.request({
					method:'POST',
					url:self.$api +'/app/pay/recharge',
					data:{
						balance: self.money,
						payment: 2,
						prepaidTime: 0,
						"userId": "",
						types:this.types
					},
					header:{'token':uni.getStorageSync('token')},
					success: (res) => {
						console.log(res.data.data,'-------充值-----')
						if(res.data.code == 200) {
							self.wxpay(res.data.data)
							uni.hideLoading()
							
						}
					}
				})
						
			},
			wxpay(reson){
				uni.requestPayment({
					provider: 'wxpay',
					nonceStr:reson.nonceStr,
					package:reson.packageValue,
					signType:'MD5',
					paySign:reson.paySign,
					timeStamp:reson.timeStamp,
					success: (res) => {
						console.log(res)
						uni.showToast({
							icon:'success',
							title:'支付成功'
						})
						// uni.redirectTo({
						// 	url:'/pagesB/pay/pay?types=' +this.types
						// })
						this.$mHelper.to('/pagesB/pay/pay?types=' +this.types)
						// uni.reLaunch({
						// 	url:'/pagesB/pay/pay?types=' +this.types
						// })
					},
					fail(err) {
						uni.showToast({
							icon:'none',
							title:'支付失败'
						})
						console.log('支付失败')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	button{
		position: absolute;
		bottom: 80rpx;
		background-color: #00A29A;
		color: #FFFFFF;
		// font-size: 28rpx;
		height: 92rpx;
		line-height: 92rpx;
		width: 92%;
	}
	.bala-flex{
		display: flex;
		flex-wrap: wrap;
		
		// justify-content: space-between;
		.bala_lv{
			background-color: #00A29A;
			color: #FFFFFF;
		}
	}
	.bala_lv{
		background-color: #00A29A;
		color: #FFFFFF;
	}
	.bala-ge{
		margin-right: 15rpx;
		width: 22%;
		margin-bottom: 20rpx;
		background-color: #EFEFEF;
		padding: 30rpx;
		border-radius: 18rpx;
		text-align: center;
		.a{
			font-size: 32rpx;
			margin-bottom: 25rpx;
		}
		label{
			font-size: 28rpx;
		}
	}
	.wenzi{
		font-size: 34rpx;
		color: #333333;
		margin: 40rpx 0;
		font-weight: 500;
	}
	.bala{
		padding: 30rpx;
		.bala-he{
			background:#00A29A ;
		    padding: 30rpx;
			border-radius: 10rpx;
			color: #FFFFFF;
			.bala-money{
				font-size: 48rpx;
				color: #FFFFFF;
			}
			.bala-dui{
				width: 172rpx;
				height: 48rpx;
				line-height: 48rpx;
				color: #00A29A;
				background: #FFFFFF;
				border-radius: 8rpx;
				text-align: center;
			}
			.bi{
				margin-top: 30rpx;
				align-items: center;
			}
		}
		
	}
	
</style>
